<nz-card nzTitle="table td editable">
  <nz-space [ngStyle]="{ 'margin-bottom': '10px' }">
    <button *nzSpaceItem nz-button nzType="dashed" (click)="log()">
      log table value
    </button>
  </nz-space>

  <nz-table nzBordered nzTemplateMode>
    <thead>
      <tr>
        <th>Name</th>
        <th nzAlign="center">Age</th>
        <th>country</th>
      </tr>
    </thead>
    <tbody>
      @for (item of list; track item) {
        <tr>
          <td nzBreakWord>
            <span nzx-editable [(nzxContent)]="item.name"></span>
          </td>
          <td nzAlign="center">
            <span nzx-editable [(nzxContent)]="item.age"></span>
          </td>
          <td nzBreakWord>
            <span
              nzx-editable
              [(nzxContent)]="item.country"
              [nzxShowBtn]="false"
            ></span>
          </td>
        </tr>
      }
    </tbody>
  </nz-table>
</nz-card>

<nz-card nzTitle="detail editable">
  <nz-space [ngStyle]="{ 'margin-bottom': '10px' }">
    <button *nzSpaceItem nz-button nzType="dashed" (click)="logDetail()">
      log detail value
    </button>
  </nz-space>
  <nz-descriptions nzTitle="User Info">
    <nz-descriptions-item nzTitle="UserName">
      <span
        nzx-editable
        [(nzxContent)]="userDetail.userName"
        nzxContentType="string"
      ></span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="Age">
      <span
        nzx-editable
        [(nzxContent)]="userDetail.age"
        nzxContentType="number"
      ></span>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="Live">
      <span
        nzx-editable
        [(nzxContent)]="userDetail.live"
        [nzxShowBtn]="false"
      ></span>
    </nz-descriptions-item>
  </nz-descriptions>
</nz-card>
